<template>
  <div
    :style="{ top: posY + 'px', left: posX + 'px' }"
    class="popStay-wrap popHD"
  >
    <i class="el-icon-error close" @click="cancel" />
    <span class="title">{{ remarks.name }}风险点桥梁堵水隐患设置</span>
    <img class="line" src="../../../assets/map/popHD/popHD-line.png" alt="">
    <div class="pop-row">
      <span class="key">堵水类型</span>
      <el-select v-model="dstype" placeholder="请选择" class="mysel">
        <el-option
          v-for="item in dstypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="pop-row">
      <span class="key">堵塞开始</span>
      <el-date-picker
        v-model="hiddenbegin"
        class="tiemSel"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm" 
        placeholder="选择日期时间"
      />
    </div>
    <div class="pop-row">
      <span class="key">堵塞结束</span>
      <el-date-picker
        v-model="hiddenend"
        class="tiemSel"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm" 
        placeholder="选择日期时间"
      />
    </div>
    <img class="line" src="../../../assets/map/popHD/popHD-line2.png" alt="">
    <div class="pop-row">
      <div class="hdbtn" @click="onSubmit">
        确&nbsp; &nbsp; 定
      </div>
      <div class="hdbtn" @click="cancel">
        取&nbsp; &nbsp; 消
      </div>
    </div>
  </div>
</template>
<script>
import pop from '../mixins/popPosStay'
export default {
    name: 'Pop',
    mixins: [pop],
    data() {
        return {
            hiddenbegin: this.$moment().format('YYYY-MM-DD HH:mm'),
            hiddenend: this.$moment().add(3, 'hour').format('YYYY-MM-DD HH:mm'),
            dstypes: [{
                value: 1,
                label: '全堵'
            }, {
                value: 0.5,
                label: '半堵'
            }],
            dstype: 0.5,
            dataIsValid: false,
        }
    },
    computed: {
        remarks: function() {
            return this.$store.getters.popStayParams.remarks
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //     this.hiddenbegin = this.$moment(this.remarks.dtBeginHD).format('YYYY-MM-DD HH:mm')
        //     this.hiddenend = this.$moment(this.remarks.dtEndHD).format('YYYY-MM-DD HH:mm')
        // })
        this.$eventBus.$on('HDDefaultTime', params => {
            this.hiddenbegin = params.dtBeginHD
            this.hiddenend = params.dtEndHD
        })
    },
    beforeDestroy() {
        this.$eventBus.$off('HDDefaultTime')
    },
    methods: {
      // 比较时间早晚
        compareDate(d1, d2) {
            return ((new Date(d1.replace(/\-/g, "\/"))) > (new Date(d2.replace(/\-/g, "\/"))));
        },
        // 提交
        onSubmit() {
            if (this.dstype !== '' && this.hiddenbegin !== '' && this.hiddenend !== '') {
                var dstype = this.dstypes.find(item => {
                    return item.value === Number(this.dstype)
                }).label
                console.log('this.hiddenbegin:',this.hiddenbegin,"this.hiddenend",this.hiddenend);
                
                this.dataIsValid = this.compareDate(this.hiddenbegin, this.hiddenend,)
                // console.log('开始晚于结束吗',this.dataIsValid);
                if (this.dataIsValid) {
                    this.$message({
                        message: '结束时间不可早于开始时间',
                        type: 'warning'
                    })
                    return false
                }

                this.$eventBus.$emit('HDDlgFormSubmit', {
                    pointsid: this.remarks.id,
                    id: this.remarks.id,
                    name: this.remarks.name,
                    dstype: this.dstype,
                    dstypeName: dstype,
                    hiddendangertype: '1',
                    hiddenbegin: this.hiddenbegin,
                    hiddenend: this.hiddenend
                })
                this.$message({
                    message: '新增自定义隐患成功！',
                    type: 'success'
                })
                this.$store.dispatch('closePopStay')
            }
        },
        cancel() {
            this.$store.dispatch('closePopStay')
        }
    }
}
</script>

<style lang="scss" scoped>
.popStay-wrap  {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 270px;
  &.popHD{
    background: url("../../../assets/map/popHD/popHD-frame.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .close{
      position: absolute;
      right: 20px;
      top: 15px;
      cursor: pointer;
    }
    .title{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 22px;
      color: #FCF9F6;
    }
    .line{
      width: 90%;
    }
  }

  .mysel{
    width: 170px;
  }
  .tiemSel{
    width: 170px;
  }
}
::v-deep .tiemSel .el-input__inner{
  border: none;
}
.pop-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  line-height: 16px;
  .key {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: #DDE8F8;
  }
  .hdbtn{
    background: url(../../../assets/map/popHD/btnPlay.png) no-repeat top center;
    background-size: 100% 100%;
    padding: 10px 20px 7px 20px;
    &:hover{
      background: url(../../../assets/map/popHD/btnPlay_active.png) no-repeat top center;
      background-size: 100% 100%;
    }
  }
}
</style>
